/**
 * 问卷调查系统入口文件
 */

import { useState, useEffect, ReactNode } from 'react'
import { Tabs } from 'tdesign-react'
import WriteQuestionnaires from './WriteQuestionnaires'
import CreateQuestionnaires from './CreateQuestionnaires/CreateQuestionnaires'
// import CreateQuestionnaires from './CreateQuestionnaires'
// import AddUser from './AddUser'
import './index.less'
import AddUser from './AddUser'

type TabType = {
  tabKey: TabKeyType,
  label: string,
  component: ReactNode,
}
type TabKeyType = 'write-questionnaires' | 'create-questionnaires' | 'add-user'

const { TabPanel } = Tabs

const Questionnaires = (props: any) => {

  const [tabKey, setTabKey] = useState<TabKeyType>('write-questionnaires')

  const questionnairesTab: TabType[] = [
    {
      label: '填写问卷',
      tabKey: 'write-questionnaires',
      component: <WriteQuestionnaires />
    },
    {
      label: '创建问卷',
      tabKey: 'create-questionnaires',
      component: <CreateQuestionnaires />
    },
    {
      label: '添加用户',
      tabKey: 'add-user',
      component: <AddUser/>
    },
  ]

  return <div className='questionnaires-system'>
    <Tabs
      className='questionnaires-tabs'
      placement='top'
      size='medium'
      defaultValue={tabKey}
      onChange={(value) => { setTabKey(value as TabKeyType) }}
    >
      {questionnairesTab.map((item: TabType) => {
        return <TabPanel label={item.label} value={item.tabKey} key={item.tabKey}> 
          {item.component}
        </TabPanel>
      })}
    </Tabs>
  </div>
}

export default Questionnaires
